<template>
  <div class="card">
    <div id="main" style="width: 100%; height: 250px"></div>
  </div>
</template>

<script>
import { mapState, mapActions, mapGetters } from "vuex";
import * as echarts from "echarts";

export default {
  name: "Setting",
  components: {},
  data() {
    return {
      popupShow: 0,
      isShowDeleteComfirm: false,
      // data: [
      //   [
      //     "00:00",
      //     "01:00",
      //     "02:00",
      //     "03:00",
      //     "04:00",
      //     "05:00",
      //     "06:00",
      //     "07:00",
      //     "08:00",
      //     "09:00",
      //     "10:00",
      //     "11:00",
      //     "12:00",
      //     "13:00",
      //     "14:00",
      //     "15:00",
      //     "16:00",
      //     "17:00",
      //     "18:00",
      //     "19:00",
      //     "20:00",
      //     "21:00",
      //     "22:00",
      //     "23:00",
      //     "24:00",
      //   ],
      //   [
      //     0, 30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1,
      //     30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3,
      //   ],
      //   [
      //     0, 30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1,
      //     30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3,
      //   ],
      //   [
      //     0, 92.1, 85.7, 83.1, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1,
      //     30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3,
      //   ],
      //   [
      //     124.1, 67.2, 79.5, 86.4, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3,
      //     41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3, 23,
      //     24,
      //   ],
      // ]
    };
  },
  computed: {
    ...mapState([
      "motorLock",
      "battery",
      "role",
      "isShare",
      "devName",
      "darkMode",
    ]),
    ...mapState({
      defenceSwitch: (state) => state.defenceSwitch.on,
      startMode: (state) => state.startMode.mode - 1,
      autocruiseSwitch: (state) => state.autocruiseSwitch.on,
      speedUnit: (state) => state.mileageMode.mode,
      status: (state) => state.status.status,
    }),
    ...mapGetters(["canControl"]),
  },
  props: {
    data: {
      default: [
        [
          "00:00",
          "01:00",
          "02:00",
          "03:00",
          "04:00",
          "05:00",
          "06:00",
          "07:00",
          "08:00",
          "09:00",
          "10:00",
          "11:00",
          "12:00",
          "13:00",
          "14:00",
          "15:00",
          "16:00",
          "17:00",
          "18:00",
          "19:00",
          "20:00",
          "21:00",
          "22:00",
          "23:00",
          "24:00",
        ],
        [
          0, 30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1,
          30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3,
        ],
        [
          0, 30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1,
          30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3,
        ],
        [
          0, 92.1, 85.7, 83.1, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3, 41.1,
          30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3,
        ],
        [
          124.1, 67.2, 79.5, 86.4, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3,
          41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 65.1, 53.3, 41.1, 30.4, 53.3, 23,
          24,
        ],
      ],
    },
  },
  watch: {
    data: {
      handler() {
        this.draw();
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    draw() {
      var myChart = echarts.init(document.getElementById("main"));
      // 绘制图表
      console.log(this.data);
      let option = {
        dataset: {
          source: this.data,
        },
        legend: {
          data: [this.$t("enum2"), this.$t("enum3"), this.$t("enum4"), this.$t("enum5")],
          width: "100%",
          itemWidth: 16,
          left: "20",
          itemHeight: 8,
          textStyle: {
            color: this.darkMode
              ? "rgba(255,255,255,0.2)"
              : "rgba(0,0,0,0.4)",
            fontSize: "10px"
          }
        },
        xAxis: [
          {
            type: "category",
            gridIndex: 0,
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: this.darkMode
                  ? "rgba(255,255,255,0.2)"
                  : "#eee",
              },
            },
            axisLabel: {//x轴文字的配置
              show: true,
              textStyle: {
                color: this.darkMode
                  ? "rgba(255,255,255,0.2)"
                  : "rgba(0,0,0,0.4)",
                fontSize: "10px"
              }
            }
          },
          // { type: 'category', gridIndex: 1 }
        ],
        color: [
          "rgb(232,64,38)",
          "rgb(161,45,247)",
          "rgb(237,111,33)",
          "rgb(100,187,92)",
        ],



        yAxis: [
          {
            gridIndex: 0,
            position: "right",
            splitLine: {
              lineStyle: {
                color: this.darkMode
                  ? "rgba(255,255,255,0.2)"
                  : "#eee",
              },
            },
            axisLine: {
              lineStyle: {
                color: this.darkMode
                  ? "rgba(255,255,255,0.4)"
                  : "rgba(0,0,0,0.4)",
              },
            },
            offset: 20,
            axisLabel: {
              align: "right", // 右对齐
              fontSize: "10px"
            },
            name: this.$t('translate44'),
            nameTextStyle: {
              color: this.darkMode
                ? "rgba(255,255,255,0.4)"
                : "rgba(0,0,0,0.4)",
              nameLocation: "start",
              fontSize: "10px"
            },
          },
        ],
        grid: [{ bottom: "38", top: "30", left: "24", right: "50" }],
        series: [
          // These series are in the first grid.
          { type: "bar", name: this.$t("enum2"), seriesLayoutBy: "row", stack: "Ad" },
          { type: "bar", name: this.$t("enum3"), seriesLayoutBy: "row", stack: "Ad" },
          { type: "bar", name: this.$t("enum4"), seriesLayoutBy: "row", stack: "Ad" },
          { type: "bar", name: this.$t("enum5"), seriesLayoutBy: "row", stack: "Ad" },
          // These series are in the second grid.
        ],
      };
      myChart.setOption(option);
    },
  },
  mounted() {
    //this.draw();
    window.goBack = () => {
      if (this.popupShow) {
        this.popupShow = 0;
        return;
      }
      this.$router.goBack();
    };
  },
};
</script>
<style lang="less" scoped>
@import url("../style/public.less");
#setting {
  .card {
    align-self: stretch;
    .cardStyle();
    margin-top: 0.8rem;
    padding: 0.4rem 0;
    .switch {
      width: 4rem;
      height: 2rem;
      background-image: var(--ic_switch_off);
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right center;
      &.on {
        background-image: var(--ic_switch_on);
      }
    }
  }
}
// 适配
.pad {
  #setting {
    .content {
      margin: 0 var(--pad_column_1);
    }
  }
}
</style>